<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes custom-property-animation {
  from { --from: blue; --to: cyan; }
  to { --from: green; --to: lime; }
}
@keyframes standard-property-animation {
  from { background-color: var(--from); }
  to { background-color: var(--to); }
}
div {
  --from: red;
  --to: red;
  animation-name: standard-property-animation, custom-property-animation;
  animation-duration: 10s;
  animation-timing-function: linear;
}
#targetA {
  animation-delay: -2.5s;
}
#targetB {
  animation-delay: -7.5s;
}
</style>
<div id="targetA"></div>
<div id="targetB"></div>
<script>
test(() => {
  assert_equals(getComputedStyle(targetA).getPropertyValue('--from'), ' blue');
  assert_equals(getComputedStyle(targetA).getPropertyValue('--to'), ' cyan');
  assert_equals(getComputedStyle(targetB).getPropertyValue('--from'), ' green');
  assert_equals(getComputedStyle(targetB).getPropertyValue('--to'), ' lime');
}, 'CSS Animations on custom properties should be applied');

test(() => {
  assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 64, 255)');
  assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 223, 0)');
}, 'CSS Animations on custom properties should be reflected in var() references in animation keyframes');
</script>
